<template>
	<view class="home-box">
		
	
		<view class="content-box">
			<view class="head-content">
				<view class="head-content-left">共有{{cateList.length}}项</view>
				<view class="head-content-right">
					<view class="add-class" @click="open(1)">添加</view>
				</view>
			</view>
			<view class="cate-list">
				<view class="cate-item" v-for="(item,index) in cateList" :key="index">
					<view class="index">{{index+1}}</view>
					<view class="cate-name">{{item.name}}</view>
					<view class="option">
						<view class="del" @click="delCate(item)">删除</view>
						<view class="eidt" @click="editCate(item,2)">编辑</view>
					</view>
				</view>
			</view>
			<u-popup :show="show" @close="close" @open="open(1)" mode="center">
				<view class="cate-input">
					<u--input placeholder="请输入商品分类的名称" border="surround" v-model="name"></u--input>
					<view class="submit" @click="addCate">确定</view>
				</view>
			</u-popup>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getStoreData,
		setStoreData,
		httpPost,
		httpGet
	} from "@/utils/http.js";
	import {
		appletImgUrl,
		imgUrl
	} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl: appletImgUrl,
				imgUrl: imgUrl,
				navList: [{
					name: '商品库存'
				}, {
					name: '商品分类'
				}],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				cur: 0,
				tabIndex: 0,
				show: false,
				name: "",
				cateList: [],
				storeid: "",
				model: {
					pageNo: 1,
					pageSize: 10,
					classId: "",
					storeId: ""
				},
				cateGoodList: [],
				totalPage: 1,
				status: "loadmore",
				showEdit: false,
				showModel: false,
				title: "警告",
				content: "确定删除该商品吗？",
				good: {
					id: "",
					index: null
				},
				isEdit: 1, //1新增，2编辑
				cateInfo: {}

			};
		},
		onShow() {
			console.log(this.globalData)
		},
		onLoad() {
			this.getCateList();

		},
		onReachBottom() {
			if (this.model.pageNo < this.totalPage) {
				this.status = 'loading';
				this.model.pageNo++
				this.goodsList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			getCateList() {
				const _this = this;
				httpGet("/api/sellerstore/selfInfo")
					.then((res) => {
						if (res.data) {
							_this.storeid = res.data.id;
							_this.model.storeId = res.data.id;
							_this.getCateListNew(res.data.id);

						}
					})
					.catch((e) => {});

			},
			getCateListNew(storeId) {
				const _this = this;
				httpGet("/api/barcodeclass/list/" + storeId)
					.then((res) => {
						_this.cateList = res.data;
						

					})
					.catch((e) => {});
			},
			
		
			close() {
				this.show = false;
			},
			open(val) {
				this.isEdit = val;
				this.show = true;
			},
			addCate() {
				const _this = this;
				console.log(this.isEdit)
				if (this.isEdit == 1) {
					httpPost("/api/barcodeclass/save", {
							name: this.name
						})
						.then((res) => {
							uni.showToast({
								icon: "none",
								title: "添加成功"
							});
							_this.show = false;
							_this.getCateList();
						})
						.catch((e) => {});
				} else {
					this.cateInfo.name=this.name;
					httpPost("/api/barcodeclass/update", this.cateInfo)
						.then((res) => {
							uni.showToast({
								icon: "none",
								title: "添加成功"
							});
							_this.show = false;
							_this.getCateList();
						})
						.catch((e) => {});
				}

			},
			delCate(data) {
				const _this = this;
				httpGet("/api/barcodeclass/delete/" + data.id)
					.then((res) => {
						uni.showToast({
							icon: "none",
							title: "删除成功"
						});
						_this.getCateList();
					})
					.catch((e) => {});
			},
			editCate(data, val) {
				this.isEdit = val;
				console.log(data)
				this.name = data.name;
				this.cateInfo = data;
				this.show = true;
			}
		},
	};
</script>

<style lang="scss">
	.home-box {
		background-color: #F7F7F7;
		height: 100vh;

	}

	.tabNav {
		background-color: #fff;
	}

	.head-option {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #fff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		.head-option-right {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.add,
			.eidt {
				padding: 8rpx 20rpx;
				border: 2rpx solid #bebebe;
				font-size: 24rpx;
			}

			.eidt {
				margin-left: 20rpx;
			}
		}

		.head-option-left {
			color: #bebebe;
			font-size: 24rpx;
			line-height: 52rpx;
		}
	}

	.class-list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.list-left {
			width: 160rpx;

			.nav-li {
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				border-left: 10rpx solid #fff;
			}

			.active {
				border-left: 10rpx solid #369df6;
				background-color: #fff;
			}
		}

		.list-right {
			width: 590rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			background-color: #fff;
			padding-top: 20rpx;

			.good-item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				position: relative;
				margin-bottom: 20rpx;

				.option-btn-box {
					position: absolute;
					top: 10rpx;
					right: 0;
					font-size: 24rpx;
					color: #cb935d;

					.option-btn-edit {
						margin-bottom: 20rpx;
						padding: 6rpx 10rpx;
					}

					.option-btn-del {
						padding: 6rpx 10rpx;
					}
				}

				.good-left {
					.code {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.good-right {
					margin-left: 10rpx;

					.good-name {
						font-size: 28rpx;
					}

					.good-intro {
						.good-tag {
							font-size: 24rpx;
							color: #bebebe;
						}
					}
				}
			}

		}
	}

	.head-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx 30rpx;

		.head-content-left {
			line-height: 54rpx;
		}

		.head-content-right {
			.add-class {
				padding: 6rpx 20rpx;
				color: #cb935d;
				border: 2rpx solid #cb935d;
				border-radius: 10rpx;
			}
		}
	}

	.cate-list {
		.cate-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding-left: 30rpx;
			padding-right: 30rpx;
			font-size: 24rpx;
			background-color: #fff;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;

			.option {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.eidt {
					margin-left: 20rpx;
				}
			}

			.index {
				margin-right: 20rpx;
			}

			.cate-name {
				width: 520rpx;
			}
		}

	}

	.cate-input {
		width: 500rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.submit {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(to right, #28ECEA, #2695F5);
			color: #fff;
			margin-top: 40rpx;
			margin-left: 150rpx;
		}
	}
</style>